<template>
  <el-button type="primary" @click="open">{{ $t('基础设置') }}</el-button>

  <el-dialog :title="$t('t_groupSetting')" width="600px" v-model="visible" top="5vh">
    <el-button-group class="operator">
      <el-button type="primary" @click="save">{{ $t('btn_save') }}</el-button>
    </el-button-group>

    <div class="ctx">
      <el-form label-position="right">
        <el-form-item label="资源目录"><el-input v-model="store.state.currentBaseConfig.baseUrl" disabled /></el-form-item>
        <el-form-item label="图片默认最大生成次数"><el-input type="number" v-model="store.state.base.defaultPendantMax" @change="saveBase" /></el-form-item>
        <el-form-item label="限制元素最大重复数"><el-input type="number" v-model="store.state.base.defaultPendantReplay" @change="saveBase" /></el-form-item>
        <el-form-item label="切换项目">
          <el-select v-model="store.state.currentProjectName" style="width:100%" @change="handleChangeProject">
            <el-option
              v-for="it in Object.keys(store.state.config)" :key="it"
              :value="it"
            >{{it}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设计稿宽度"><el-input v-model="store.state.currentBaseConfig.designWidth" /></el-form-item>
        <el-form-item label="设计稿高度"><el-input v-model="store.state.currentBaseConfig.designHeight" /></el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useConfigStore } from '@/store/config.store';
import { ElMessage } from 'element-plus';

const visible = ref(false)
const store = useConfigStore()

const save = () => store.dispatch('save').then(() => {
  ElMessage.success('保存成功！')
  visible.value = false
})

const open = () => {
  visible.value = true
  // store.dispatch('pull')
}

const saveBase = () => store.dispatch('saveBase')
const handleChangeProject = (value: string) => {
  store.dispatch('toggleProject', value)
}

defineExpose({open})
</script>

<style lang="less" scoped>
@import url('../../assets/less/mixin.less');
.operator{.flex(flex-end); padding-bottom:20px;}
</style>
